<!--
 * @Autor: 黄旗
 * @Date: 2020-06-02 17:47:27
-->
<template>
    <div class="i-table-no-border">
        <Form
            ref="form"
            :model="params"
            :label-width="80"
            label-position="right"
        >
            <Row :gutter="12" type="flex">
                <Col>
                    <FormItem label="挂号时间">
                        <DatePicker
                            type="daterange"
                            :transfer="true"
                            :options="options"
                            value="yyyy-MM-dd"
                            split-panels
                            v-model="val1"
                            placement="bottom-start"
                            placeholder="请选择挂号时间"
                            @on-change="submits"
                        />
                    </FormItem>
                </Col>
                <Col>
                    <FormItem label="来院时间">
                        <DatePicker
                            type="daterange"
                            :disabled="disabled"
                            :transfer="true"
                            :options="optionsing"
                            split-panels
                            v-model="val2"
                            placement="bottom-start"
                            placeholder="请选择来院时间"
                            @on-change="submits"
                        />
                    </FormItem>
                </Col>
                <Col>
                    <FormItem label="病种">
                        <Select
                            v-model="params.patient_diseases_id"
                            placeholder="请选择病种"
                            element-id="personnel"
                            clearable
                            @on-change="askDatas"
                        >
                            <Option
                                v-for="item in diseaseslist"
                                :key="item.value"
                                :value="item.value"
                                >{{ item.title }}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col>
                    <FormItem label="诊室">
                        <Select
                            v-model="params.clinic_id"
                            placeholder="请选择诊室"
                            element-id="diagnosis"
                            clearable
                            @on-change="askDatas"
                        >
                            <Option
                                v-for="item in cliniclist"
                                :key="item.value"
                                :value="item.value"
                                >{{ item.title }}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col>
                    <FormItem label="到诊状态">
                        <Select
                            v-model="params.is_visit"
                            placeholder="请选择到诊状态"
                            element-id="diagnosis"
                            clearable
                            @on-change="askDatas"
                        >
                            <Option value="2">过期未到患者</Option>
                            <Option value="1">已到患者</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <Table
            :columns="columns"
            :data="data"
            size="small"
            :loading="loading"
            :row-class-name="rowClassName"
        >
            <template slot-scope="{ row }" slot="info">
                <a href="javaScript:;" @click="handleDetailPatient(row)">{{
                    row.info
                }}</a>
            </template>
        </Table>
        <div class="ivu-mt ivu-text-center">
            <Page
                :total="total"
                :current.sync="params.page"
                show-total
                show-elevator
                :page-size-opts="pageOpts"
                :page-size="params.pageSize"
                @on-change="handleChangePage"
                show-sizer transfer
                @on-page-size-change="handleChangeSize"
                placement="top"
            />
        </div>

        <Drawer
            :closable="false"
            v-model="showTetailDrawer"
            width="1000"
            class="edtailDrawers"
        >
            <detailDrawer
                :editType="2"
                v-if="patientId && showTetailDrawer"
                :patientId="patientId"
            >
            </detailDrawer>
        </Drawer>
    </div>
</template>

<script>
/* 这里导入其他文件：import 《组件名称》 from '《组件路径》 */
    import { referralcomprise, referralselectinfo } from '@/api/consumption';
    import detailDrawer from '@/pages/home/patient/patient-detail/index.vue';
    import dayjs from 'dayjs';
    export default {
        /* import引入的组件注入到components对象中使用 */
        components: {
            detailDrawer
        },
        data () {
            return {
                options: {
                    disabledDate (date) {
                        return date && date.valueOf() > Date.now();
                    }
                },
                optionsing: {
                    disabledDate (date) {
                        return date && date.valueOf() > Date.now();
                    }
                },
                data: [],
                cliniclist: [],
                diseaseslist: [],
                patientId: null,
                showTetailDrawer: false,
                val1: [],
                val2: [],
                disabled: true,
                columns: [
                    {
                        title: '基本信息',
                        key: 'info',
                        slot: 'info',
                        minWidth: 150,
                        fixed: 'left'
                    },
                    {
                        title: '挂号时间',
                        minWidth: 130,
                        key: 'reg_time'
                    },
                    {
                        title: '诊室',
                        width: 100,
                        key: 'clinic_name'
                    },
                    {
                        title: '复诊次数',
                        width: 130,
                        key: 'revisiting_count'
                    },
                    {
                        title: '上次回访时间',
                        minWidth: 130,
                        key: 'last_callback_time'
                    },
                    {
                        title: '回访总次数',
                        width: 130,
                        key: 'callback_count'
                    },
                    {
                        title: '上次来院时间',
                        minWidth: 130,
                        key: 'last_revisiting_time'
                    },
                    {
                        title: '病种',
                        width: 100,
                        key: 'diseases'
                    },
                    {
                        title: '预到时间',
                        minWidth: 130,
                        key: 'next_revisiting_time'
                    },
                    {
                        title: '归属医助',
                        width: 130,
                        key: 'belong_assistant_name'
                    }
                // {
                //     title: "区间消费",
                //     width: 120,
                //     key: "section_money",
                // },
                // {
                //     title: "总消费",
                //     width: 100,
                //     key: "all_money",
                // },
                ],
                loading: false,
                total: 0,
                pageOpts: [10, 15, 20, 30, 50],
                params: {
                    pageSize: 10,
                    page: 1,
                    start_reg_date: '',
                    end_reg_date: '',
                    start_last_revisiting_date: '',
                    end_last_revisiting_date: '',
                    patient_diseases_id: '',
                    clinic_id: '',
                    is_visit: ''
                }
            };
        },
        /* 监听属性 类似于data概念 */
        computed: {},
        watch: {},
        methods: {
            /* @函数功能: 初始化 */
            initial () {
                referralselectinfo().then((res) => {
                    this.diseaseslist = res.diseases;
                    this.cliniclist = res.clinic;
                    this.askData();
                });
            },

            handleDetailPatient (row) {
                this.patientId = row.id;
                this.showTetailDrawer = true;
            },
            /* @函数功能: 请求数据 */
            askData () {
                this.loading = true;
                referralcomprise(this.params).then((res) => {
                    this.data = res.list;
                    this.total = res.total;
                    this.loading = false;
                });
            },
            askDatas () {
                this.params.page = 1;
                this.askData();
            },
            // 切换分页
            handleChangePage (e) {
                this.params.page = e;
                this.askData();
            },
            // 切换分页条数
            handleChangeSize (e) {
                this.params.page = 1;
                this.params.pageSize = e;
                this.askData();
            },
            submits () {
                if (this.val1[0]) {
                    this.params.start_reg_date = dayjs(this.val1[0]).format(
                        'YYYY-MM-DD'
                    );
                    this.params.end_reg_date = dayjs(this.val1[1]).format(
                        'YYYY-MM-DD'
                    );
                    this.disabled = false;
                    let that = this;
                    this.optionsing = {
                        disabledDate (date) {
                            return (
                                (date && date.valueOf() > Date.now()) ||
                                (date && date.valueOf() < that.val1[0])
                            );
                        }
                    };
                } else {
                    this.params.start_reg_date = '';
                    this.params.end_reg_date = '';
                    this.disabled = true;
                    this.val2 = [];
                }
                if (this.val2[0]) {
                    this.params.start_last_revisiting_date = dayjs(
                        this.val2[0]
                    ).format('YYYY-MM-DD');
                    this.params.end_last_revisiting_date = dayjs(
                        this.val2[1]
                    ).format('YYYY-MM-DD');
                } else {
                    this.params.start_last_revisiting_date = '';
                    this.params.end_last_revisiting_date = '';
                }
                this.askDatas();
            },
            rowClassName: function (row, index) {
                if (row.is_visit === 0) {
                    return 'ivu-table-row-red';
                }
            }
        },
        created () {},
        /* 挂载完成能访问DOM元素 */
        mounted () {},
        /* 创建之前 */
        beforeCreate () {},
        /* 挂载之前 */
        beforeMount () {},
        /* 更新之前 */
        beforeUpdate () {},
        /* 更新之后 */
        updated () {},
        /* 销毁之前 */
        beforeDestroy () {},
        /* 销毁完成 */
        destroyed () {},
        /* 有keep-alive缓存即会触发 */
        activated () {}
    };
</script>

<style scoped lang="less">
/deep/.ivu-table-row-red {
    color: red;
}
</style>
